<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>
<body>
    <div id="app" style="width: 800px; height: 500px;"></div>
</body>
<script>
      var myEchart =echarts.init(document.getElementById('app'))
      var option={
        title: {
          text: '就业率'
        },
        xAxis: {
           nameLocation:'middle',
           type: 'category',
           data:[],
           name:'C2109班'
        },
        legend: { //图例组件
          data: ['C2109A班','C2109B班','C2109C班']
        },
        yAxis: {},
        series: [
          {
            name: 'C2109A班',
            type: 'bar',
            data: [80],
            barGap:'0%',/*多个并排柱子设置柱子之间的间距*/
              //  barCategoryGap:'0%',/*多个并排柱子设置柱子之间的间距*/
          },
          {
            name: 'C2109B班',
            type: 'bar',
            data: [60],
            barGap:'0%',/*多个并排柱子设置柱子之间的间距*/
              //  barCategoryGap:'0%',/*多个并排柱子设置柱子之间的间距*/
          },
          {
            name: 'C2109C班',
            type: 'bar',
            data: [100],
            barGap:'0%',/*多个并排柱子设置柱子之间的间距*/
              //  barCategoryGap:'0%',/*多个并排柱子设置柱子之间的间距*/
          },
        ]
      }
      myEchart.setOption(option)
</script>
</html>